<template>
    <div class="pageMain">
        <div class="header">
            <van-nav-bar title="问答详情" left-arrow @click-left="toBack" />
        </div>
        <div class="conBox">
            <div class="goods">
                <img :src='alPath + "zhonghui/product/" + product.productPic' alt="">
                <div>{{ product.productName }}</div>
                <div>{{ product.productTitle }}</div>
            </div>
            <div class="quesion">
                <img :src="alPath + 'zhonghui/user/' + answer.userImg || '../../assets/geren/timg.png'"
                    @error="loadimg">
                <div>{{ answer.userName || '佚名用户' }}</div>
                <div>{{ answer.answerDate ? answer.answerDate.split(' ')[0] : '暂无时间' }}</div>
                <div class="quesion-info">{{ answer.answerContent }}</div>
            </div>
            <div class="answer-num">共<span>{{ answer.answerNum || 0 }}</span>条用户回答</div>
            <div class="list-box">
                <div class="list-item" v-for="(item, index) in answer.replyList" :key="index">
                    <img :src="alPath + 'zhonghui/user/' + item.userImg || '../../assets/geren/timg.png'"
                        @error="loadimg">
                    <div>{{ item.userName || '佚名用户' }}<span>买过的人</span></div>
                    <div>{{ item.answerDate ? item.answerDate.split(' ')[0] : '暂无时间' }}</div>
                    <div>{{ item.answerContent }}</div>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="btn" v-if="metoAsk" @click="askAnswer">我来回答</div>
        </div>


        <van-popup class="indextop" v-model="show" round closeable>
            <div class="popMain">
                <div class="content">
                    <div class="items">
                        <div class="items-title">您的回答:</div>
                        <textarea placeholder="请输入您的回答" class="items-textarea" v-model="answer_content"></textarea>
                    </div>
                </div>
                <div class="btn-box btn-box1">
                    <button type="button" @click="submit">提交</button>
                </div>
            </div>
        </van-popup>
    </div>

</template>

<script>
import { getAnswerAndReply, addAnswer } from '../../network/product'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            product: JSON.parse(localStorage.product), //商品详情
            answer: '',
            answer_content: '',//提问
            metoAsk: true,
            show: false,
        }
    },
    mounted() {

    },
    methods: {
        submit() {
            if (this.answer_content == '') {
                this.$toast('请输入您的回答')
                return
            }
            console.log(this.answer_content);
            addAnswer({
                userId: localStorage.userId,
                productId: localStorage.product_id,
                parentId: this.answer.answerId,
                answerContent: this.answer_content,
                answerStatus: 1
            }).then(res => {
                if (res.flag) {
                    this.$toast('回复成功')
                    this.getAnswer()
                    this.show = false
                } else {
                    this.$toast('提交失败')
                }
            })
        },
        askAnswer: function () {
            this.show = true
            this.answer_content = ''
        },

        getAnswer: function () {
            getAnswerAndReply({
                answerId: JSON.parse(localStorage.answer).answerId
            }).then(res => {
                if (res.flag) {
                    this.answer = res.data
                    console.log(this.answer);
                }
            })
        },
        loadimg(e) {
            var img = e.srcElement;
            img.src = require('../../assets/geren/timg.png')
        },

        toBack() {
            this.$router.go(-1)
        },

    },
    created() {
        this.getAnswer()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}

.conBox {
    padding-top: 148px;
}

.pageMain {
    width: 100%;
    height: 100vh;
    background: #f2f2f2;
    overflow: scroll;
}


.goods {
    position: fixed;
    width: 100%;
    top: 90px;
    background-color: #fff;
    height: 184px;
    padding-left: 184px;
    font-size: 28px;
    box-sizing: border-box;
    padding-right: 24px;
    z-index: 20;
}

.goods::before {
    content: '';
    position: absolute;
    width: 100vw;
    height: 8px;
    background-color: #f0f0f0;
    bottom: -6px;
    left: 0;
}

.goods>div:nth-child(2) {
    padding-top: 28px;
}

.goods>div:nth-child(3) {
    position: absolute;
    bottom: 32px;
    font-size: 24px;
    color: 666;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.goods img {
    position: absolute;
    left: 24px;
    width: 136px;
    height: 136px;
    border-radius: 16px;
    top: 24px;
}

.answer-box {
    position: fixed;
    width: 100%;
    bottom: 132px;
    background-color: #fff;
    height: calc(100vh - 460px);
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 24px;
    font-size: 28px;
    padding-bottom: 0;
}

.item {
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 24px;
}



.answer::before {
    content: '答';
    background-color: #FF8023;
}

.see {
    color: #909090;
}

.see span {
    color: #ff3b14;
    padding: 0 8px;
}

.btn {
    position: fixed;
    bottom: 36px;
    width: calc(100vw - 48px);
    background: -webkit-linear-gradient(to right, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    color: #fff;
    border-radius: 56px;
    box-shadow: 0 0px 10px #ff8023;
    padding: 16px 0;
    border: none;
    text-align: center;
    left: 24px;
}



.quesion {
    position: fixed;
    width: 100%;
    z-index: 20;
    left: 0;
    top: 292px;
    background-color: #fff;
    font-size: 28px;
    padding: 24px 24px 24px 120px;
}

.quesion img {
    width: 76px;
    height: 76px;
    display: block;
    position: absolute;
    border-radius: 50%;
    left: 24px;
}

.quesion>div:nth-child(2) {
    padding-top: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.quesion>div:nth-child(3) {
    font-size: 24px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-top: 4px;
}

.quesion-info {
    position: relative;
    line-height: 48px;
    padding-left: 36px;
    padding-top: 8px;
}

.quesion-info::before {
    content: '问';
    position: absolute;
    left: -24px;
    background-color: #ff3b14;
    top: 12px;
}



.list-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 588px);
    overflow-y: scroll;
    background-color: #fff;
}

.list-item {
    position: relative;
    padding: 24px 24px 16px 120px;
    font-size: 28px;
    box-sizing: border-box;
    border-bottom: 2px solid #f5f5f5;
}

.list-item img {
    width: 76px;
    height: 76px;
    display: block;
    border-radius: 50%;
    position: absolute;
    left: 24px;
}

.list-item>div:nth-child(2) {
    color: #323232;
}

.list-item>div:nth-child(2) span {
    display: inline-block;
    width: 120px;
    height: 28px;
    line-height: 28px;
    margin-left: 12px;
    background: #FF8023;
    border-radius: 8px;
    font-size: 24px;
    color: #fff;
    text-align: center;
}

.list-item>div:nth-child(3) {
    color: #999;
    padding-top: 4px;
}

.list-item>div:nth-child(4) {
    padding-top: 12px;
    color: #606060;
    line-height: 40px;
    font-size: 24px;
}



.answer-num {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 20;
    top: 496px;
    background-color: #fff;
    height: 72px;
    line-height: 72px;
    font-size: 28px;
    padding-left: 84px;
}

.answer-num::before {
    content: '答';
    position: absolute;
    background-color: #ff995d;
    bottom: 16px;
    left: 24px;
}

.answer-num::before,
.quesion-info::before {
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    text-align: center;
    font-size: 28px;
    line-height: 40px;
}

.answer-num span {
    color: #ff995d;
    margin: 0 12px;
}




.popMain {
    box-sizing: border-box;
    padding: 48px;
    width: 700px;
}


.items {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding-left: 160px;
    margin-bottom: 32px;
}

.items:last-child {
    margin-bottom: 0;
}

.items .items-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 44px;
    line-height: 44px;
    font-size: 30px;
    color: #333;
}

.items .items-input {
    margin-bottom: 0;
    width: 100%;
    height: 44px;
    border: none;
    padding: 0;
    font-size: 30px;
    color: #333;
}

.items .items-textarea {
    width: 100%;
    height: 88px;
    margin-bottom: 0;
    border: none;
    padding: 0;
    font-size: 30px;
    color: #333;
}

.items .mui-icon-arrowright {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 44px;
    color: #999;
}

.items.pad-right {
    padding-right: 44px;
}

.btn-box {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 88px;
    padding: 0 24px;
}

.btn-box button {
    width: 100%;
    height: 100%;
    padding: 16px 0;
    border: none;
    border-radius: 44px;
    background: #FF3B14;
    font-size: 28px;
    color: #FFF;
}

.btn-box1 {
    position: relative !important;
    margin-top: 200px !important;
}
</style>